<template>
    <div class="page-report" @touchmove.stop.prevent="">
        <page-bar>
            <a href="javascript:void(0);" @click="$emit('cancel',isDone)"  slot="left">
                <i class="uicon uicon-back"></i>
            </a>
            <div slot="middle" class="page-title">投诉</div>
            <i slot="right"></i>
        </page-bar>
        <transition name="page-slide" mode="out-in">
            <div v-if="!isDone" key="edit">
                <div class="header">
                    请选择投诉的原因
                </div>
                <div class="list">
                    <a href="javascript:;"  @click="form.item = item" :class="{'on':form.item.id === item.id}" v-for="item in list" :key="item.id">
                        {{item.name}}
                        <i class="uicon uicon-choose"></i>
                    </a>
                </div>
                <a href="javascript:;" class="submit" :class="{'disabled':formStatus||posting}" @click="submit">{{posting ? '正在提交' : '提交'}}</a>
            </div>
            <div class="report-done" v-else key="save">
                <i class="uicon uicon-report-done"></i>
                <p class="tit">你的投诉已提交</p>
                <p>感谢你的反馈，我们会在24小时内完成审核，</p>
                <p>并通过系统消息告诉你结果。</p>
                <p>你可以在我的页卡，<a href="javascript:;" @click="toMsgCenter">消息中心</a>查看</p>

                <a href="javascript:;" @click="$emit('done')" class="done">确定</a>
            </div>
        </transition>
    </div>
</template>
<script>
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'

const SOURCE = {
    news:[
        {
            id:0,
            name:'色情低俗',
        },
        {
            id:1,
            name:'产品质量',
        },
        {
            id:2,
            name:'假冒品牌',
        },
        {
            id:3,
            name:'虚假广告',
        },
        {
            id:4,
            name:'诈骗',
        },
        {
            id:5,
            name:'其他',
        }
    ],
    comment:[
        {
            id:1,
            name:'淫秽色情'
        },
        {
            id:2,
            name:'违法信息'
        },
        {
            id:3,
            name:'营销广告'
        },
        {
            id:4,
            name:'恶意攻击谩骂'
        },
    ],
    user:[
        {
            id:1,
            name:'淫秽色情'
        },
        {
            id:2,
            name:'违法信息'
        },
        {
            id:3,
            name:'营销广告'
        },
        {
            id:4,
            name:'恶意攻击谩骂'
        },
    ]
}

export default {
    name:'ui-report',
    props:{
        title:{
            type:String,
        },
        type:{
            type:Number,
        },
        from:{
            type:String,
            default:'news', // news:举报新闻  comment: 举报评论 user:举报用户
        },
        id:{
            type:[Number,String],
            required:true,
        }
    },
    components:{
        [pageBar.name]:pageBar,
        [scrollFixed.name]:scrollFixed,
    },
    data(){
        return {
            isDone:false,
            posting:false,
            form:{
                item:{
                    id:'',
                    name:''
                },
            },
            list:[]
        }
    },
    computed:{
        formStatus(){
            return this.form.item.name === '';
        }
    },
    mounted(){
        this.list = SOURCE[this.from]
    },
    methods:{
        toMsgCenter(){
            location.href = this.$config.pages.message;
        },
        submit(){
             if(this.formStatus) {
                 this.$toast('请选择投诉的原因');
                 return false;
             }
             this.postData();
         },
         postData(){
             this.posting = true;
             let url,params;
             switch(this.from){
                 case 'news':
                    url = '?ct=news&ac=complaint';
                    params = {
                        id:this.id,
                        title:this.title,
                        type:this.type,
                        content:this.form.item.name
                    }
                    break;
                case 'comment':
                case 'user':
                    url = '?ct=comment&ac=report_comment';
                    params = {
                        comment_id : this.id,
                        type : this.form.item.id
                    }
                    break;
             }
             return this.$http.post(url,params).then(response=>{
                 let {data} = response;
                 if(data.code == 0){
                     if(this.from == 'news'){
                         this.isDone = true;
                     }else {
                         this.$emit('done')
                     }
                 }else{
                     this.$toast(data.msg);
                 }
             }).catch(e=>{
                 window.$zEvent.$emit('ERROR',e);
                 this.$toast(e);
             }).finally(()=>{
                 this.posting = false;
             })
         }
    }
}
</script>
<style lang="less">
.page-report {
    position: fixed;
    z-index:9999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#f6f6f6;
    .page-bar {
        background-color:#fff;
    }
    .page-title {
        color:#282828;
        font-size:36px;
    }
    .header {
        font-size:28px;
        color:#c6c6c6;
        height:60px;
        line-height: 60px;
    }
    .list,.header {
        padding:0 30px;
    }
    .list {
        border-top:1px solid #efefef;
        background-color:#fff;

        a {
            transition: color .2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height:88px;
            color:#282828;
            font-size:34px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            i {
                opacity:0;
                transition: opacity .2s;
                

            }
            &.on {
                color:#e64a19;

                i {
                    opacity:1;
                }
            }
            & + a {
                border-top:1px solid #e3e3e3;
            }
        }
    }

    .submit,.done {
        margin:50px 30px 0;
        display: block;
        text-align: center;
        line-height:88px;
        height:88px;
        font-size:36px;
        color:#fff;
        border-radius:8px;
        background-color:#e64a19;

        &.disabled {
            opacity:.8
        }
    }

    .report-done {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:158px 30px 30px;

        .tit {
            margin-top:66px;
            margin-bottom:30px;
            font-size:36px;
            color:#282828;
        }
        p {
            margin-bottom:20px;
            line-height: 1;
            font-size:32px;
            color:#666;

            a {
                color:#e64a19;
            }
        }
        .done {
            margin-top:70px;
            width:100%;
        }
    }

}
</style>